//  定义类组件
// 使用es 6 中的class 属性来定义类组件
// 特点: 有状态 有生命周期
// import React, { Component } from 'react';
// class Category extends Component {
//     render() {
//         return <div>
//             我是分页页-类组件
//         </div>
//     }
// }

// export default Category


// 使用rcc 快捷的方式创建类组件
// 组件的包裹元素标签
// 在react 存在类似vue中的temoplate 和 block 标签,只起到包裹作用,不渲染
// react 提供 <></>和 <React.Fragment></React.Fragment>
// 注意: 事件中的this 默认为undefined, 如果想要在事件中获取this, 那么需要给事件绑定this
// 方式1: 在构造函数中绑定 contructor(){this.事件执行函数= this.事件执行函数.bind(this,其他参数) } 不常用
// 方式2: 声明式绑定  常用     <button onClick={this.handleClickFn.bind(this, 100)}>类组件绑定事件第二种方式</button>


import React, { Component } from 'react';
// const handleClickFn = function () {
//     console.log('点击事件');
//     console.log(this);
// }


class Category extends Component {
    // constructor(props) {
    //     super()
    //     // constructor 构造函数中的this 指向当前组件的实例,通过bind改变函数的this 指向
    //     构造函数中绑定this: 特点: 有this, 可传参,但是参数不灵活
    //     this.handleClickFn = this.handleClickFn.bind(this, 999)
    //     console.log('constructor', props);
    // }
    render() {
        // 类组件 中获取 父组件传递的参数
        console.log(this);  // this 为当前组件的实例对象
        console.log(this.props);// 获取父传子的参数
        console.log('render');
        return (
            <div>
                我是分页页-类组件
                <ul>
                    {this.props.usernameArr.map(item => <li key={item.id}>{item.name}</li>)}
                </ul>
                {/* 直接绑定方式: 特点: 没有this,不可传参 */}
                {/* <button onClick={this.handleClickFn}>我是类组件中的按钮绑定事件方式1</button> */}
                {/* 行内绑定this方式: 特点: 有this, 可传参 */}
                {/* <button onClick={this.handleClickFn.bind(this, 100)}>类组件绑定事件第二种方式</button> */}
                {/* 行内使用箭头函数形式: 特点: 有this,可传参 */}
                {/* <button onClick={(e) => this.handleClickFn(1000, e)}>行内箭头函数形式绑定this</button> */}
                {/* 执行函数使用箭头函数,特点: 有this,不能传参 */}
                <button onClick={this.handleClickFn}>执行函数直接使用箭头函数形式</button>
            </div>
        );
    };
    // handleClickFn(num, e) {
    //     console.log('点击事件');
    //     console.log(this);//undefind
    //     // console.log(num);
    //     // // 事件对象,为合成事件对象, 不存在浏览器的兼容性
    //     // // 要想获取原生的事件对象, 可以使用 e.nativeEvent
    //     // console.log(e);
    // }
    handleClickFn = (e) => {
        console.log(this);
        console.log(e);
    }
}

export default Category;


